<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j home-container page-index">
    <div
      v-if="decoratePageIndex.length === 0 && decorateHeader.length === 0 && isLoaded"
      class="home"
    >
      <!-- 下滑时候的头部 -->
      <transition name="fade">
        <div
          v-if="showHeadScroll"
          class="head-scroll"
        >
          <div class="content">
            <router-link
              to="/"
              class="logo"
            >
              <img
                v-if="webConfigData.pcLogoImgText"
                class="logo-img"
                :src="webConfigData.pcLogoImgText"
                alt
              >
            </router-link>
            <div :class="['menu',store.locale === 'en'?'menu-en':'']">
              <router-link
                class="item item-on"
                to="/"
              >
                {{ $t('commonHead.home') }}
              </router-link>
              <router-link
                :to="{
                  path: '/list',
                  query: { st: 0 }
                }"
                class="item"
              >
                {{ $t('commonHead.productList') }}
              </router-link>
              <router-link
                :to="{
                  path: '/list',
                  query: { st: 1 }
                }"
                class="item"
              >
                {{ $t('commonHead.newProducts') }}
              </router-link>
              <router-link
                to="/special-discount"
                class="item"
              >
                {{ $t('commonHead.limitedTimeOffer') }}
              </router-link>
              <router-link
                to="/group-buy"
                class="item"
              >
                {{ $t('commonHead.groupDiscount') }}
              </router-link>
              <router-link
                to="/flash-sale"
                class="item"
              >
                {{ $t('commonHead.spikeSpecial') }}
              </router-link>
              <!-- <router-link to="/coupons" class="item">领券中心</router-link> -->
              <a
                href="javascript:void(0)"
                class="item"
                @click="toCoupons"
              >{{ $t('commonHead.voucherCenter') }}</a>
            </div>
            <div class="right">
              <div class="search">
                <input
                  v-model="topsearchTerms"
                  type="text"
                  class="search-input"
                  :placeholder="$t('searchByStOrpN')"
                  @keyup.enter="topSearchProd"
                >
                <input
                  type="submit"
                  class="search-btn"
                  value="搜索"
                  @click="topSearchProd"
                >
              </div>
              <div
                class="scroll-cart"
                @click="toCart"
              >
                <span
                  v-if="totalCartCount"
                  class="number"
                >{{ totalCartCount > 99 ? '99+' : totalCartCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <!-- 下滑时候的头部 -->

      <!-- banner -->
      <div
        v-if="banners.length"
        class="banner"
      >
        <el-carousel
          height="450px"
          style="overflow-y: hidden;"
        >
          <el-carousel-item
            v-for="(banner, index) in banners"
            :key="index"
            :style="{cursor:(banner.type !== 0 ? 'default' : 'pointer')}"
            class="banner-item"
          >
            <img-show
              :src="banner.imgUrl"
              @handle-click="()=>imgToProd(banner)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- /banner -->

      <div class="content">
        <!-- 快捷入口 -->
        <div class="shortcut">
          <router-link
            to="/list?st=1"
            class="item item01"
          >
            <div class="text">
              <div class="cn">
                {{ $t('index.newProduct') }}
              </div>
            </div>
            <div class="img">
              <img
                src="@/assets/img/short-01.png"
                alt
              >
            </div>
          </router-link>
          <router-link
            to="/special-discount"
            class="item item02"
          >
            <div class="text">
              <div class="cn">
                {{ $t('index.limitedTimeOffer') }}
              </div>
            </div>
            <div class="img">
              <img
                src="@/assets/img/short-02.png"
                alt
              >
            </div>
          </router-link>
          <router-link
            to="/group-buy"
            class="item item03"
          >
            <div class="text">
              <div class="cn">
                {{ $t('index.groupDiscount') }}
              </div>
            </div>
            <div class="img">
              <img
                src="@/assets/img/short-03.png"
                alt
              >
            </div>
          </router-link>
          <router-link
            to="/flash-sale"
            class="item item04"
          >
            <div class="text">
              <div class="cn">
                {{ $t('index.specialSale') }}
              </div>
            </div>
            <div class="img">
              <img
                src="@/assets/img/short-04.png"
                alt
              >
            </div>
          </router-link>
          <router-link
            to="/coupons"
            class="item item05"
          >
            <div class="text">
              <div class="cn">
                {{ $t('index.couponsCenter') }}
              </div>
            </div>
            <div class="img">
              <img
                src="@/assets/img/short-05.png"
                alt
              >
            </div>
          </router-link>
        </div>

        <!-- 广告 -->
        <router-link
          v-if="snapUpList.length"
          to="/flash-sale"
          class="adv"
        >
          <img
            src="@/assets/img/adv1.jpg"
            alt
          >
        </router-link>

        <!-- 秒杀专区 -->
        <div
          v-if="snapUpList.length"
          class="goods-list flash-sale"
        >
          <div class="list-tit">
            <div class="text">
              <span class="tit">{{ $t('index.secondKillZone') }}</span>
              <span class="description">{{ $t('index.selectedProductsLimited') }}</span>
            </div>
            <router-link
              to="/flash-sale"
              class="view-more"
            >
              {{ $t('index.seeMore') }}
              <span class="arrow">></span>
            </router-link>
          </div>
          <prod-item
            :pale-list="snapUpList"
            :list-type="2"
            @update-pic-indext="updatePicIndextS"
          />
        </div>

        <!-- 广告 -->
        <router-link
          v-if="composeGroup.length"
          to="/group-buy"
          class="adv"
        >
          <img
            src="@/assets/img/adv2.jpg"
            alt
          >
        </router-link>

        <!-- 优惠团购 -->
        <div
          v-if="composeGroup.length"
          class="goods-list group-list"
        >
          <div class="list-tit">
            <div class="text">
              <span class="tit">{{ $t('index.groupDiscount') }}</span>
              <span class="description">{{ $t('index.recommendGoodThings') }}</span>
            </div>
            <router-link
              to="/group-buy"
              class="view-more"
            >
              {{ $t('index.seeMore') }}
              <span class="arrow">></span>
            </router-link>
          </div>
          <prod-item
            :pale-list="composeGroup"
            :list-type="1"
            @update-pic-indext="updatePicIndextG"
          />
        </div>

        <!-- 广告 -->
        <router-link
          v-if="checkHotSalesProd"
          :to="{
            path: '/list',
            query: {
              st: 0
            }
          }"
          class="adv"
        >
          <img
            src="@/assets/img/adv3.jpg"
            alt
          >
        </router-link>

        <!-- 商城热销 -->
        <div
          v-if="checkHotSalesProd"
          class="goods-list group-list"
        >
          <div class="list-tit">
            <div class="text">
              <span class="tit">{{ $t('index.hotSale') }}</span>
              <span class="description">{{ $t('index.wordGoodiesInfiniteRepurchase') }}</span>
            </div>
            <router-link
              to="/list?st=0&sort=2"
              class="view-more"
            >
              {{ $t('index.seeMore') }}
              <span class="arrow">></span>
            </router-link>
          </div>
          <prod-item
            :pale-list="checkHotSalesProd && hotSalesList.records[0].products"
            :list-type="0"
            @update-pic-indext="updatePicIndextH"
          />
        </div>

        <!-- 广告 -->
        <router-link
          v-if="hotShopList.length"
          :to="{
            path: '/shop-list',
            query: {
              type: 1
            }
          }"
          class="adv"
        >
          <img
            src="@/assets/img/adv4.jpg"
            alt
          >
        </router-link>

        <!-- 优选好店 -->
        <div
          v-if="hotShopList.length"
          class="goods-list shop-list"
        >
          <div class="list-tit">
            <div class="text">
              <span class="tit">{{ $t('index.preferredStores') }}</span>
              <span class="description">{{ $t('index.recommendGoodThingsTogetherWithTheGroup') }}</span>
            </div>
            <router-link
              :to="{
                path: '/shop-list',
                query: {
                  type: 1
                }
              }"
              class="view-more"
            >
              {{ $t('index.seeMore') }}
              <span class="arrow">></span>
            </router-link>
          </div>
          <shop-item :shop-list="hotShopList" />
        </div>
      <!-- /优选好店 -->
      </div>
      <!-- 登录弹窗组件 -->
      <login-popup
        v-if="showLogin"
        @hide-login-pop="hideLoginPop"
      />
    <!-- /登录弹窗组件 -->
    </div>
    <div
      v-else
      class="home"
      style="background: #f4f4f4; min-height: calc(100vh - 278px); padding-bottom: 0"
    >
      <!-- 下滑时候的头部 -->
      <transition
        v-if="decorateHeader.length"
        name="fade"
      >
        <div
          v-if="showHeadScroll"
          class="head-scroll"
        >
          <div class="content">
            <div class="left">
              <router-link
                to="/"
                class="logo"
              >
                <img
                  v-if="webConfigData.pcLogoImgText"
                  class="logo-img"
                  :src="webConfigData.pcLogoImgText"
                  alt
                >
              </router-link>
              <div :class="['menu',store.locale === 'en'?'menu-en':'']">
                <a
                  v-for="(item, index) in decorateHeader[0].dataField.navList"
                  :key="item.name + index"
                  href="javascript:void(0)"
                  class="item"
                  @click="handleRedirect(item)"
                >{{ item.name }}</a>
              </div>
            </div>
            <div class="right">
              <div class="search">
                <input
                  v-model="topsearchTerms"
                  type="text"
                  class="search-input"
                  :placeholder="$t('searchByStOrpN')"
                  @keyup.enter="topSearchProd"
                >
                <input
                  type="submit"
                  class="search-btn"
                  value="搜索"
                  @click="topSearchProd"
                >
              </div>
              <div
                class="scroll-cart"
                @click="toCart"
              >
                <span
                  v-if="totalCartCount"
                  class="number"
                >{{ totalCartCount > 99 ? '99+' : totalCartCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <!-- 下滑时候的头部 -->

      <new-index :decorate-page-index="decoratePageIndex" />
    </div>
  </div>
</template>

<script setup>
import Cookie from 'vue-cookies'
import { redirectPath } from '@/components/decorate-component/common/pageConfig.js'
import qs from 'qs'
import { ElMessage } from 'element-plus'

const store = useLanguageStore()
const route = useRoute()
const cartNumberStore = useCartNumberStore()

const showLogin = ref(false)
const showHeadScroll = ref(false) // 头部显隐
const banners = ref([]) // 轮播图
const snapUpList = ref([]) // 秒杀专场
const composeGroup = ref([]) // 优惠团购
const hotSalesList = ref(null) // 商城热销
const topsearchTerms = ref('') // 上滑头部搜索词
const hotShopList = ref([]) // 优选好店
const webConfigStore = useWebConfigStore()
const webConfigData = computed(() => webConfigStore.pcConfig) // 网站配置信息
const decorateHeader = ref([]) // 装修头部
const decoratePageIndex = ref([]) // 装修配置信息
const isLoaded = ref(false) // 是否加载完毕

const totalCartCount = computed(() => {
  if (!Cookie.get('bbcToken')) {
    return 0
  } else {
    return cartNumberStore.cartNumbers
  }
})
const checkHotSalesProd = computed(() => {
  return !!hotSalesList.value?.records[0]?.products?.length
})
onMounted(() => {
  getPageData()
})

onUnmounted(() => {
  // 页面销毁时移除监听
  window.removeEventListener('scroll', scrollToTop)
  document.documentElement.scrollTop = 0
})
const getPageData = () => {
  getPageConfig()
  // 秒杀
  getSnapUpList()
  // 团购
  getComposeGroup()
  // 热销商品
  getHotSalesList()
  // 优选好店
  getHotShopsHead()
  // 监听页面滚动
  window.addEventListener('scroll', scrollToTop)
  // 轮播图
  getIndexBanner()
}

// 获取页面配置信息
const getPageConfig = async () => {
  const [homePage] = await Promise.all([
    // 获取装修信息
    http.get('/shopRenovation/homepage', {
      params: {
        renovationType: 1
      }
    })
  ])
  let decorateTitle = '' // 装修标题
  const tempDecorateHeader = [] // 装修头部信息
  const decorateData = [] // 装修配置信息
  if (homePage?.data?.content) {
    decorateTitle = homePage.data.name
    if (Array.isArray(JSON.parse(homePage.data.content))) {
      JSON.parse(homePage.data.content).forEach(element => {
        if (element.type !== 'shop_signs') {
          decorateData.push(element)
        } else {
          tempDecorateHeader.push(element)
        }
      })
    }
  }
  decorateHeader.value = tempDecorateHeader
  decoratePageIndex.value = await matchproducts(decorateData) // 装修配置信息
  // 将头部信息存储在pinia里面
  store.handleSetHeaders(decorateHeader.value)
  store.handleChangeDecorateSts(decoratePageIndex.value.length)

  isLoaded.value = true

  // 设置网页标题文本和图标
  if ((decorateHeader.value.length > 0 || decoratePageIndex.value.length > 0) && route.path === '/') {
    document.title = decorateTitle
  } else {
    document.title = webConfigData.value.pcTitleContent || ''
  }
}
// 获取秒杀商品
const getSnapUpList = () => {
  http.get('/search/page', {
    params: {
      current: 1,
      size: 4,
      prodType: 2,
      isActive: 1 // 过滤掉活动商品
    }
  }).then(({ data }) => {
    data.records[0].products.forEach(item => {
      item.imgs = (item.imgs ? item.imgs.split(',') : [])
      item.currentActive = 0
    })
    snapUpList.value = data.records[0].products // 秒杀
  })
}
// 获取团购商品
const getComposeGroup = () => {
  http.get('/search/page', {
    params: {
      current: 1,
      size: 4,
      prodType: 1,
      isActive: 1 // 过滤掉活动商品
    }
  }).then(({ data }) => {
    data.records[0].products.forEach(item => {
      item.imgs = (item.imgs ? item.imgs.split(',') : [])
      item.currentActive = 0
    })
    composeGroup.value = data.records[0].products // 团购
  })
}
// 获取热销商品
const getHotSalesList = () => {
  http.get('/search/page', {
    params: {
      current: 1,
      size: 12,
      sort: 2,
      orderBy: 1,
      isActive: 1 // 过滤掉活动商品
    }
  }).then(({ data }) => {
    data.records[0].products.forEach(item => {
      item.imgs = (item.imgs ? item.imgs.split(',') : [])
      item.currentActive = 0
    })
    hotSalesList.value = data // 热销
  })
}
// 匹配商品
const matchproducts = async (arr) => {
  if (Array.isArray(arr) && arr.length > 0) {
    const res = await searchGoodsMessage(arr) // 根据现有的id查询所有的商品信息
    const stores = await searchStoreMessage(arr) // 根据现有的店铺id查询所有的店铺信息
    arr.forEach(item => {
      if (item.type === 'goods_list') { // 商品列表
        item.dataField.goodsList = handleScreenGoods(item.dataField.goodsList, res, 'id')
      } else if (item.type === 'discount_coupon') { //  优惠团购
        const discountPramas = {
          // 商品名称
          prodType: 'prodType', // 商品类型
          status: 'status', // 商品状态
          price: 'activityPrice', // 商品价格
          imgs: 'pic', // 商品图片
          description: 'brief', // 商品描述
          activityStatus: 'activityStatus' // 商品描述
        }
        item.dataField.goodsList = handleScreenGoods(item.dataField.goodsList, res, 'id', discountPramas)
      } else if (item.type === 'limited_skill') { // 秒杀商品
        const limitePramas = {
          // 商品名称
          prodType: 'prodType', // 商品类型
          status: 'status', // 商品状态
          price: 'activityPrice', // 商品价格
          imgs: 'pic', // 商品图片
          description: 'brief', // 商品描述
          activityStatus: 'activityStatus' // 商品描述
        }
        item.dataField.goodsList = handleScreenGoods(item.dataField.goodsList, res, 'prodId', limitePramas)
      } else if (item.type === 'goods_module1') { // 商品模块1
        item.dataField.leftConfig.goodsList = handleScreenGoods(item.dataField.leftConfig.goodsList, res, 'id')
        item.dataField.centerConfig.goodsList = handleScreenGoods(item.dataField.centerConfig.goodsList, res, 'id')
        item.dataField.rightConfig.goodsList = handleScreenGoods(item.dataField.rightConfig.goodsList, res, 'id')
      } else if (item.type === 'goods_module2') { // 商品模块2
        item.dataField.maingoodsList = handleScreenGoods(item.dataField.maingoodsList, res, 'id')
        item.dataField.othergoodsList = handleScreenGoods(item.dataField.othergoodsList, res, 'id')
      } else if (item.type === 'goods_module3') { // 商品模块3
        item.dataField.leftConfig.goodsList = handleScreenGoods(item.dataField.leftConfig.goodsList, res, 'id')
        item.dataField.rightConfig.goodsList = handleScreenGoods(item.dataField.rightConfig.goodsList, res, 'id')
      } else if (item.type === 'goods_module4' || item.type === 'goods_module5') { // 商品模块4
        item.dataField.goodsList = handleScreenGoods(item.dataField.goodsList, res, 'id')
      } else if (item.type === 'store_list') { // 店铺列表
        item.dataField.storeList = handleScreenStrore(item.dataField.storeList, stores)
      }
    })
  }
  return arr
}
// 查询商品信息
const searchGoodsMessage = (arr) => {
  let goodsArr = []
  arr.forEach(item => {
    if (item.type === 'limited_skill') { // 秒杀商品
      item.dataField.goodsList.forEach(v => {
        goodsArr.push(v.prodId)
      })
    } else if (item.type === 'discount_coupon') { // 优惠团购
      item.dataField.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
    } else if (item.type === 'goods_list') { // 商品信息
      item.dataField.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
    } else if (item.type === 'goods_module1') { // 商品模块1
      item.dataField.leftConfig && item.dataField.leftConfig.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
      item.dataField.centerConfig && item.dataField.centerConfig.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
      item.dataField.rightConfig && item.dataField.rightConfig.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
    } else if (item.type === 'goods_module2') { // 商品模块2
      item.dataField.maingoodsList && item.dataField.maingoodsList.forEach(v => {
        goodsArr.push(v.id)
      })
      item.dataField.othergoodsList && item.dataField.othergoodsList.forEach(v => {
        goodsArr.push(v.id)
      })
    } else if (item.type === 'goods_module3') { // 商品模块3
      item.dataField.leftConfig && item.dataField.leftConfig.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
      item.dataField.rightConfig && item.dataField.rightConfig.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
    } else if (item.type === 'goods_module4') { // 商品模块4
      item.dataField.goodsList && item.dataField.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
    } else if (item.type === 'goods_module5') { // 商品模块5
      item.dataField.goodsList && item.dataField.goodsList.forEach(v => {
        goodsArr.push(v.id)
      })
    }
  })
  goodsArr = Array.from(new Set(goodsArr))
  return new Promise((resolve) => {
    http({
      method: 'get',
      url: '/search/renovationPage',
      params: {
        prodIds: goodsArr,
        current: 1,
        size: goodsArr.length,
        getDelete: true
      },
      paramsSerializer: params => {
        return qs.stringify(params, { indices: false })
      }
    }).then(res => {
      resolve(res.data.records)
    })
  })
}
// 查询店铺信息
const searchStoreMessage = (arr) => {
  let storeArr = []
  arr.forEach(item => {
    if (item.type === 'store_list') {
      item.dataField.storeList.forEach(v => {
        storeArr.push(v.shopId)
      })
    }
  })
  storeArr = Array.from(new Set(storeArr))
  return new Promise((resolve) => {
    http({
      method: 'get',
      url: '/shop/listRenovationShop',
      params: {
        shopIds: storeArr
      },
      paramsSerializer: params => {
        return qs.stringify(params, { indices: false })
      }
    }).then(res => {
      resolve(res.data)
    })
  })
}
// 筛选商品回显 currentArr: 表示当前装修的商品，backReturnArr: 表示根据现有id查询后端返回的商品
const handleScreenGoods = (currentArr, backReturnArr, type, otherParams) => {
  let params
  if (otherParams) {
    params = {
      ...otherParams
    }
  } else {
    params = {
      // 商品名称
      prodType: 'prodType', // 商品类型
      status: 'status', // 商品状态
      price: 'price', // 商品价格
      imgs: 'pic', // 商品图片
      description: 'brief' // 商品描述
    }
  }
  const arr = []
  for (let i = 0; i < currentArr.length; i++) {
    for (let j = 0; j < backReturnArr.length; j++) {
      if (currentArr[i][type] === backReturnArr[j].prodId) {
        for (const key in params) {
          currentArr[i][key] = backReturnArr[j][params[key]]
        }
        if (!currentArr[i].price) {
          currentArr[i].price = backReturnArr[j].price
        }
        if (currentArr[i].orignPrice) {
          currentArr[i].orignPrice = backReturnArr[j].oriPrice
        }
        arr.push(currentArr[i])
      }
    }
  }
  return arr
}
// 筛选店铺信息
const handleScreenStrore = (currentArr, backReturnArr) => {
  const storeParams = {
    shopLogo: 'shopLogo',
    imgs: 'shopLogo',
    shopName: 'shopName',
    shopStatus: 'shopStatus',
    type: 'type',
    fansCount: 'fansCount',
    shopFocusNumber: 'fansCount'
  }
  const arr = []
  for (let i = 0; i < currentArr.length; i++) {
    for (let j = 0; j < backReturnArr.length; j++) {
      if (currentArr[i].shopId === backReturnArr[j].shopId) {
        for (const key in storeParams) {
          currentArr[i][key] = backReturnArr[j][storeParams[key]]
        }
        arr.push(currentArr[i])
      }
    }
  }
  return arr
}
/**
 * 页面滚动事件
 */
const scrollToTop = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop
  showHeadScroll.value = scrollTop > 200
}

// 菜单跳转
const router = useRouter()
const handleRedirect = (item) => {
  if (item.path.type === '1') { // 链接的是商品
    const newPage = router.resolve({ path: '/detail/' + item.path.link })
    window.open(newPage.href, '_blank', 'noopener,noreferrer')
  } else {
    redirectPath(router, item)
  }
}
/**
 * 领券中心
 */
const toCoupons = () => {
  router.push({ path: '/coupons' })
}
/**
 * 隐藏登录弹窗
 */
const hideLoginPop = () => {
  showLogin.value = false
}
/**
 * 轮播图
 */
const getIndexBanner = () => {
  http.get('/indexImgs/0', {
    params: {
      imgType: 1
    }
  }).then(({ data }) => { banners.value = data || [] })
}

const topSearchProd = () => {
  const searchTerms = topsearchTerms.value.trim() // 去除字符串的头尾空格
  if (!searchTerms) {
    ElMessage({
      message: $t('commonHead.productNameCannotBeEmpty'),
      type: 'error',
      duration: 1000
    })
    return
  }
  // 跳转到商品列表页
  router.push({
    path: '/list',
    query: {
      pn: searchTerms
    }
  })
}

/**
 * 优选好店
 */
const getHotShopsHead = () => {
  http.get('/shop/hotShops').then(({ data }) => {
    hotShopList.value = data
  })
}

/**
 * 跳转购物车页面
 */
const toCart = () => {
  router.push('/cart')
}
/**
 * 轮播图跳转到商品
 */
const imgToProd = (banner) => {
  if (banner.type !== 0) {
    return
  }
  const prodId = banner.relation
  http.get('/prod/isStatus', {
    params: {
      prodId
    }
  }).then(({ data }) => {
    if (data) {
      const newPage = router.resolve({
        path: '/detail',
        query: {
          prodId,
          bannerEnter: '1'
        }
      })
      window.open(newPage.href, '_blank', 'noopener,noreferrer')
    }
  })
}
/**
 * 用于更新子组件中列表每个商品当前图片索引，比较抽象
 */
const updatePicIndextS = (index, newValue) => {
  snapUpList.value[index].currentActive = newValue
}
const updatePicIndextG = (index, newValue) => {
  composeGroup.value[index].currentActive = newValue
}
const updatePicIndextH = (index, newValue) => {
  hotSalesList.value.records[0].products[index].currentActive = newValue
}

</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
